<template>
	<view>
		<view class="top-back">
			<view class="top-name">用户留言</view>
			<view class="top-right" :class="screenSelect?'top-right-select':''" @click="selectAction">
				<view :class="screenSelect?'top-contnet top-content-select': 'top-contnet'">筛选</view>
				<image v-if="!screenSelect" class="top-icon" src="../../../static/select.png"></image>
				<image v-if="screenSelect" class="top-icon" src="../../../static/select_select.png"></image>
			</view>
		</view>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe emptyText=" ">
				<uni-tr>
					<uni-th align="center" width="60">排序</uni-th>
					<uni-th align="center" width="80">姓名</uni-th>
					<uni-th align="center" width="90">联系电话</uni-th>
					<uni-th align="center" width="240">留言内容</uni-th>
					<uni-th align="center" width="180">留言时间</uni-th>
					<uni-th align="center" width="100">是否回复</uni-th>
					<uni-th align="center" width="180">备注</uni-th>
					<uni-th align="center" width="160">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index" @row-click="rowclick(item)">
					<uni-td align="center">{{ index + 1 }}</uni-td>
					<uni-td align="left"><text selectable="true">{{ item.userName }}</text></uni-td>
					<uni-td align="left"><text selectable="true">{{ item.userMobile }}</text></uni-td>
					<uni-td align="left"><text class="conent-text" selectable="true">{{ item.content }}</text></uni-td>
					<uni-td align="center"><text selectable="true">{{ item.createTime }}</text></uni-td>
					<uni-td align="center">
						<statusTag v-if="item.status.code == '0'" text="待回复" type="warning" size='small'></statusTag>
						<statusTag v-if="item.status.code == '1' || item.status.code == '2'" text="已回复" type="success"
							size='small'></statusTag>
					</uni-td>
					<uni-td align="left"><text selectable="true">{{ item.remark }}</text></uni-td>
					<uni-td align="center">
						<view style="display: flex;justify-content: center; align-items: center;">
							<view class="item-blue-text" @click="detailAction(item)">查看</view>
							<view style="margin-left: 12px;" class="item-blue-text" @click="replyAction(item)">回复
							</view>
							<view style="margin-left: 12px;" class="item-blue-text" @click="remarkAction(item)">备注
							</view>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>

			<view class="search-back" v-if="tableData.length == 0">
				<image class="search-image" :src="pc_search_nodata"></image>
				<view class="search-noresult">没有查询到结果</view>
			</view>
		</view>
		<messageDetail v-if="showDetail" :item="selectItem" v-on:successBack='requestData()' :showType="showType"
			@messageDetailClose='clickMessageDetailClose'>
		</messageDetail>
		<popSelect v-model="showScreen" :x="screenx" :y="screeny" placement="top-end" dynamic>
			<view v-if="showScreen" class="screen-back">
				<uni-forms ref="baseForm" :modelValue="popData" style="width:200px;">
					<uni-forms-item>
						<uni-easyinput v-model="popData.userName" placeholder="姓名" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput v-model="popData.userMobile" placeholder="联系电话" />
					</uni-forms-item>
					<uni-forms-item>
						<uniselect v-model="popData.status" placeholder='是否回复' :localdata="typeRange"
							@change="typeChange" :clear="false">
						</uniselect>
					</uni-forms-item>

					<view class="select-bottom">
						<view class="select-bottom-left" @click="selectReset">重置</view>
						<view class="select-bottom-right" @click="selectSureAction">筛选</view>
					</view>
				</uni-forms>
			</view>
		</popSelect>
	</view>
</template>

<script>
	import messageDetail from "@/packageB/PC/basicManage/userMessageDetail.vue"
	import statusTag from "@/packageC/PhonePC/components/tags/tags.vue"
	import popSelect from '@/components/popSelect/popSelect.vue'
	import uniselect from "@/packageB/PC/components/uni-data-select/uni-data-select.vue"

	export default {
		components: {
			messageDetail,
			statusTag,
			popSelect,
			uniselect
		},

		data() {
			return {
				showDetail: false,
				tableData: [],
				showType: 'reply',
				selectItem: {},
				screenx: 0,
				screeny: 0,
				showScreen: false,
				popData: {
					userName: '',
					userMobile: "",
					status: '',
				},
				screenSelect: false,
				typeRange: [{
						value: 1,
						text: "是"
					},
					{
						value: 0,
						text: "否"
					}
				],
				pc_search_nodata: getApp().globalData.baseImageUrl + '/pc_search_nodata.png'
			}

		},
		onLoad() {

		},
		mounted() {
			this.requestData()
		},
		methods: {
			//网络请求
			async requestData() {
				let _this = this
				let parmas = {
					size: 10000,
					'userMobile': _this.popData.userMobile,
					"status": _this.popData.status === '' ? "" : (_this.popData.status == 0 ? '0' : 'in:1,2')
				}
				
				if (this.screenSelect) {
					if (_this.popData.userName) {
						this.$set(parmas, 'userName', 'lk:' + _this.popData.userName)
					}
					if (_this.popData.userMobile) {
						this.$set(parmas, 'userMobile', _this.popData.userMobile)
					}
					// if (_this.popData.status != ') {
					// 	this.$set(parmas, 'userMobile', (_this.popData.status == 0 ? '0' : 'in:1,2'))
					// }
				}
				console.log(parmas)
				const res = await this.$myRequest({
					url: "/admin/leaveMsg/list",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.list.length; i++) {
						var item = res.data.data.list[i];
						item.picUrls = _this.$imageUrls({
							picUrls: item.picUrls
						})

						arr.push(item)
						console.log(item.picUrls)
					}
					_this.tableData = arr
				}
			},

			//点击筛选
			selectAction(e) {
				this.screenx = e.touches[0].clientX
				uni.getSystemInfo({
					success: res => {
						this.screenx = res.windowWidth - 30
					}
				})
				this.screeny = e.touches[0].clientY + 4
				this.showScreen = !this.showScreen
			},

			//筛选重置
			selectReset() {
				this.popData = {
					userName: '',
					userMobile: "",
					status: '',
				};
				this.screenSelect = false;
				this.requestData();
			},
			//类型选择
			typeChange(e) {
				console.log(e)
			},
			//筛选确认	
			selectSureAction() {
				var patt = /^[1][3-9][\d]{9}/
				if (this.popData.userMobile && !patt.test(this.popData.userMobile)) {
					uni.showToast({
						title: '请输入正确手机号！',
						icon: "none"
					})
					return;
				}

				this.screenSelect = true;
				this.showScreen = !this.showScreen
				this.requestData()
			},

			//点击列
			rowclick(item) {
				console.log('item', item);
				this.$emit('clickCaselist', item)
			},

			//详情
			detailAction(item) {
				this.showType = 'detail';
				this.selectItem = item;
				this.showDetail = true;
			},
			//回复
			replyAction(item) {
				this.showType = 'reply';
				this.selectItem = item;
				this.showDetail = true;
			},
			//备注
			remarkAction(item) {
				this.showType = 'remark';
				this.selectItem = item;
				this.showDetail = true;
			},
			clickMessageDetailClose() {
				this.showDetail = false;
			},

		}
	}
</script>

<style scoped>
	.top-back {
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.top-name {
		color: #333;
		font-size: 18px;
		font-weight: bold;
		margin-left: 30px;
	}

	.top-num {
		color: #999;
		font-size: 18px;
		margin-left: 4px;
	}

	.top-contnet {
		font-size: 14px;
		color: #999;
	}

	.top-content-select {
		color: #2DA9C5;
	}

	.top-icon {
		width: 16px;
		height: 16px;
	}

	.top-right {
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-right: 16px;
		margin-left: auto;
		padding: 5px 10px;
		border-radius: 5px;
	}

	.top-right-select {
		background-color: #E8F7FB;
	}

	.top-right-left {
		margin-left: auto;
	}

	.uni-container {
		margin-left: 40px;
		margin-right: 16px;
		width: auto;
	}

	.search-back {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.search-noresult {
		font-size: 14px;
		color: #333;
		font-weight: 400;
	}

	.search-image {
		width: 150px;
		height: 150px;
	}

	.screen-back {
		padding: 10px;
		width: 300px;
	}

	.header-img {
		width: 30px;
		height: 30px;
	}

	.item-blue-text {
		cursor: pointer;
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
	}

	.top-exit {
		width: 56px;
		height: 30px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		font-weight: normal;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select-bottom {
		display: flex;
	}

	.select-bottom-left {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #333;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.select-bottom-right {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #fff;
		background: #8ED8E9;
		border-radius: 2px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		margin-right: 0px;
		margin-left: auto;
	}

	.conent-text {
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
</style>
